<template>
  <div class="charts-section">
    <a-row :gutter="[16, 16]">
      <a-col :span="18">
        <a-card title="📈 文章发布&阅读趋势" class="chart-card">
          <template #extra>
            <a-radio-group v-model="trendPeriod" type="button" size="small">
              <a-radio value="week">近7天</a-radio>
              <a-radio value="month">近30天</a-radio>
              <a-radio value="year">近12月</a-radio>
            </a-radio-group>
          </template>
          <Chart :option="trendChartOption" height="350px" />
        </a-card>
      </a-col>
      <a-col :span="6">
        <a-card title="🏷️ 分类热度分析" class="chart-card">
          <Chart :option="categoryChartOption" height="350px" />
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { graphic } from 'echarts';
  import useChartOption from '@/hooks/chart-option';
  import Chart from '@/components/chart/index.vue';

  // 趋势图表配置
  const trendPeriod = ref('month');
  const trendChartData = ref({
    dates: [
      '1月',
      '2月',
      '3月',
      '4月',
      '5月',
      '6月',
      '7月',
      '8月',
      '9月',
      '10月',
      '11月',
      '12月',
    ],
    articles: [5, 8, 12, 15, 18, 22, 16, 19, 23, 28, 25, 32],
    views: [120, 180, 280, 350, 420, 580, 480, 650, 780, 920, 850, 1150],
  });

  const { chartOption: trendChartOption } = useChartOption(() => ({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
      },
    },
    legend: {
      data: ['发布文章', '阅读量'],
    },
    xAxis: {
      type: 'category',
      data: trendChartData.value.dates,
    },
    yAxis: [
      {
        type: 'value',
        name: '文章数',
        position: 'left',
      },
      {
        type: 'value',
        name: '阅读量',
        position: 'right',
      },
    ],
    series: [
      {
        name: '发布文章',
        type: 'bar',
        data: trendChartData.value.articles,
        itemStyle: {
          color: new graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#667eea' },
            { offset: 1, color: '#764ba2' },
          ]),
        },
      },
      {
        name: '阅读量',
        type: 'line',
        yAxisIndex: 1,
        data: trendChartData.value.views,
        smooth: true,
        lineStyle: {
          color: '#f093fb',
        },
        areaStyle: {
          color: new graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(240, 147, 251, 0.3)' },
            { offset: 1, color: 'rgba(240, 147, 251, 0.1)' },
          ]),
        },
      },
    ],
  }));

  // 分类图表配置
  const categoryData = ref([
    { name: '技术分享', value: 35, articles: 45 },
    { name: '生活感悟', value: 25, articles: 32 },
    { name: '学习笔记', value: 20, articles: 26 },
    { name: '项目总结', value: 15, articles: 19 },
    { name: '其他', value: 5, articles: 6 },
  ]);

  const { chartOption: categoryChartOption } = useChartOption(() => ({
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c}篇 ({d}%)',
    },
    series: [
      {
        name: '文章分类',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center',
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '18',
            fontWeight: 'bold',
          },
        },
        labelLine: {
          show: false,
        },
        data: categoryData.value.map((item) => ({
          name: item.name,
          value: item.articles,
        })),
      },
    ],
  }));
</script>

<style lang="less" scoped>
  .charts-section {
    margin-bottom: 32px;

    .chart-card {
      border-radius: 20px;
      background: rgba(255, 255, 255, 0.95);
      backdrop-filter: blur(20px);
      border: 1px solid rgba(255, 255, 255, 0.3);
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
      transition: all 0.3s ease;

      &:hover {
        transform: translateY(-2px);
        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);
      }

      :deep(.arco-card-header) {
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
        padding: 20px 24px 16px;

        .arco-card-header-title {
          font-size: 16px;
          font-weight: 600;
          color: #2d3748;
        }
      }
    }
  }
</style>
